<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/notice' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>公告管理</el-breadcrumb-item>
      <el-breadcrumb-item>发布公告</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card shadow="never">
      <!-- 富文本编辑器 -->
      <quill-editor v-model="inform"></quill-editor>
      <!-- 添加按钮区域 -->
      <el-row class="addBtn">
        <el-col>
          <el-button type="primary" size="small" icon="el-icon-circle-plus" @click="addNews">发布</el-button>
          <el-button
            type="warning"
            size="small"
            icon="el-icon-document-delete"
            @click="clearNews"
          >重置</el-button>
          <el-button size="small" icon="el-icon-caret-right" @click="showDrawer">更多</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!-- 公告抽屉 -->
    <el-drawer title="往期精彩：" :visible.sync="newSdrawer" direction="ttb" size="50%">
      <div class="drawerBody">
        <!-- 公告标题列表 -->
        <el-checkbox-group v-model="checked" class="checkList">
          <p v-for="(item,index) in informList" :key="index">
            <el-checkbox :label="item._id" class="aloneBox">{{item.inform}}</el-checkbox>
          </p>
        </el-checkbox-group>
        <!-- 删除按钮 -->
        <el-button type="danger" size="small" @click="delInform">删除</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 存储公告信息
      inform: '',
      // 控制公告抽屉是否可见
      newSdrawer: false,
      // 存储公告列表
      informList: [],
      // 存储要删除公告的_id
      checked: []
    }
  },
  methods: {
    // 发布公告
    async addNews() {
      // 公告为空，直接返回
      if (this.inform.trim().length === 0) {
        return this.$message.error('公告内容不能为空')
      }
      // 获取发布公告人的信息
      let author = JSON.parse(localStorage.getItem('userInfo')).username
      // 发起请求
      let res = await this.$http.post('informs', {
        inform: this.inform,
        author
      })
      // 发布失败
      if (res.meta.status !== 201) {
        return this.$message.error('公告发布失败')
      }
      // 发布成功
      this.$message.success('公告发布成功')
      // 清空编辑器
      this.inform = ''
    },
    // 清除文本编辑器中的内容
    clearNews() {
      this.inform = ''
    },
    // 打开抽屉
    showDrawer() {
      // 打开抽屉
      this.newSdrawer = true
      // 获取公告列表
      this.getInformList()
    },
    // 获取公告列表
    async getInformList() {
      let res = await this.$http.get('informs/list')
      // 获取失败
      if (res.meta.status !== 200) {
        return this.$message.error('获取公告列表失败')
      }
      // 获取成功，遍历存储公告的数组，获取公告标题
      res.data.forEach(item => {
        let content = item.inform
        let start = content.indexOf('<h')
        let end = content.indexOf('</h')
        item.inform = content.substring(start + 4, end)
      })
      this.informList = res.data
    },
    // 删除公告
    async delInform() {
      let res = await this.$http.delete('informs', {
        params: { id: JSON.stringify(this.checked) }
      })
      // 删除失败
      if (res.meta.status !== 204) {
        return this.$message.error('删除公告失败')
      }
      // 删除成功
      this.$message.success('删除公告成功')
      // 关闭抽屉
      this.newSdrawer = false
    }
  }
}
</script>

<style lang="less">
.ql-editor {
  height: 400px !important;
}
.addBtn {
  margin-top: 15px;
}
.drawerBody {
  padding: 0 20px;
}
.checkList {
  margin-bottom: 30px;
  .aloneBox {
    margin-bottom: 10px;
  }
}
</style>